import { useEffect, useRef } from "react";
import { View } from "@tarojs/components";
import Taro, {
  useLoad,
  useReady,
  useUnload,
  usePullDownRefresh,
  useReachBottom,
  useDidShow,
  useDidHide,
} from "@tarojs/taro";
import "./index.scss";

/**
 * 生命周期执行顺序
 * useEffect - mounted
 *
 * useDidShow
 *
 * useReady
 *
 * ============
 *
 * useUnload
 *
 * useEffect - unmounted
 */

export default function Detail04() {
  // 为什么使用useRef？因为useRef存的对象在整个组件的生命周期中都是保持同一个对象
  const instance = useRef(Taro.getCurrentInstance());
  console.log("router.params=>", instance?.current?.router?.params);

  // 1.支持组件的生命周期
  useEffect(() => {
    console.log("Component mounted.");
    return () => {
      console.log("Component unmounted.");
    };
  });

  useLoad((options) => {
    console.log("Detail04 Page useLoad.", options);
  });

  useDidShow(() => {
    console.log("Detail04 Page useDidShow.");
  });

  useReady(() => {
    console.log("Detail04 Page useReady.");
  });

  useDidHide(() => {
    console.log("Detail04 Page useDidHide.");
  });

  useUnload(() => {
    console.log("Detail04 Page useUnload.");
  });

  usePullDownRefresh(() => {
    console.log("Detail04 Page usePullDownRefresh.");
    setTimeout(() => {
      Taro.stopPullDownRefresh();
    }, 1000);
  });

  useReachBottom(() => {
    console.log("detail05 useReachBottom");
  });

  return (
    <View className="detail04">
      <View className="detail01-item">item1</View>
      <View className="detail01-item">item1</View>
      <View className="detail01-item">item1</View>
      <View className="detail01-item">item1</View>
      <View className="detail01-item">item1</View>
      <View className="detail01-item">item1</View>
      <View className="detail01-item">item1</View>
      <View className="detail01-item">item1</View>
      <View className="detail01-item">item1</View>
      <View className="detail01-item">item1</View>
      <View className="detail01-item">item1</View>
      <View className="detail01-item">item1</View>
      <View className="detail01-item">item1</View>
      <View className="detail01-item">item1</View>
      <View className="detail01-item">item1</View>
    </View>
  );
}
